<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人中心</title>
    <meta name="keywords" content="影院热映大片,热映电影票房,热映电影购票,热映电影打分,热映电影选座">
    <meta name="description" content="为您提供热映电影大片选座购票服务，以及对热映电影评分、评价等信息介绍">
    <meta http-equiv="cleartype" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="true">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/frontcss/common.d1d257d3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/frontcss/profile-profile.772600de.css">
    <script>if (window.devicePixelRatio >= 2) {
        document.write('<link rel="stylesheet" href="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image-2x.8ba7074d.css"/>')
    }</script>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript">
        let sf = new Set(["JPG", "JPEG", "PNG"]);

        function checkUser() {
            var mobile = $("#mobile1").val();
            if (mobile == "") {
                alert("用户不存在");
                return false;
            }
            let fileName = $("#file1").val();
            if (fileName != "") {
                let suffix = fileName.toUpperCase().substr(fileName.lastIndexOf(".") + 1);
                if (!sf.has(suffix)) {
                    alert("只能选择JPG,JPEG,PNG格式的文件");
                    return false;
                }
                if ($("#file1")[0].files[0].size / (1024 * 1024) > 1) {
                    alert("选中的文件必须小于1M");
                    return false;
                }
            } else {
                alert("尚未选择头像!");
                return false;
            }
            return true;
        }

        function checkInpput() {
            if ($("#mobile").val() == "") {
                alert("请输入手机号码");
                $("#mobile").focus();
                return false;
            }
            if ($("#password").val() == "") {
                alert("登录密码不能为空");
                $("#password").focus();
                return false;
            }
            if ($("#password").val() != $("#password1").val()) {
                alert("登录密码与确认密码不一致");
                $("#password1").focus();
                return false;
            }
            if ($("#userName").val() == "") {
                alert("请输入用户昵称");
                $("#userName").focus();
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<jsp:include page="top.jsp">
    <jsp:param name="menuId" value="0"/>
</jsp:include>
<div class="container" id="app">
    <div class="content">
        <div class="main">
            <div class="info-content clearfix">
                <div class="user-profile-nav">
                    <h1>个人中心</h1>
                    <a href="${pageContext.request.contextPath}/front/index/v/myOrder" class="profile">我的订单</a>
                    <a href="${pageContext.request.contextPath}/front/index/v/myInfo" class="orders active">基本信息</a>
                </div>

                <div class="profile-container">
                    <div class="profile-title">
                        基本信息
                    </div>
                    <div class="avatar-container">
                        <form action="${pageContext.request.contextPath}/front/index/v/uploadHead" method="post"
                              enctype="multipart/form-data" onsubmit="return checkUser();">
                            <input type="hidden" name="mobile" id="mobile1" value="${member.mobile}">
                            <div class="avatar-content">
                                <img class="J-setted-avatar"
                                     src="${pageContext.request.contextPath}/<c:if test="${member==null || member.headImg==''}">/card/headImg.png</c:if><c:if test="${member.headImg!=''}">${member.headImg}</c:if>">
                                <div class="J-upload-avatar-w upload-avatar-image">
                                    <input type="file" id="file1" name="file1">
                                    <input type="submit" id="submit-btn" class="J-upload-avatar upload-btn"
                                           value="更换头像">
                                </div>
                                <div class="tips">支持JPG,JPEG,PNG格式,且文件需小于1M</div>
                            </div>
                        </form>
                    </div>

                    <form id="J-userexinfo-form" class="userexinfo-form" method="post"
                          action="${pageContext.request.contextPath}/front/index/v/userReg"
                          onsubmit="return checkInpput();">
                        <div class="userexinfo-form-section">
                            <p>手机号码：</p>
                            <span><input type="text" name="mobile" id="mobile" class="ui-checkbox" readonly="readonly"
                                         placeholder="手机号码是登录账号，必须唯一" value="${member.mobile}"></span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>登录密码：</p>
                            <span><input type="password" name="password" id="password" class="ui-checkbox"
                                         value="${member.password}"></span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>确认密码：</p>
                            <span><input type="password" name="password1" id="password1" class="ui-checkbox"
                                         value="${member.password}"></span>
                        </div>

                        <div class="userexinfo-form-section">
                            <p>用户昵称：</p>
                            <span><input type="text" name="userName" id="userName" class="ui-checkbox"
                                         placeholder="用户昵称" value="${member.userName}"></span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>性别：</p>
                            <span><input type="radio" name="sex" id="userexinfo-form-gender-1" value="男"
                                         class="ui-radio radio-first"
                                         <c:if test="${member==null || member.sex=='男'}">checked</c:if> ><label
                                    for="userexinfo-form-gender-1">男</label></span>
                            <span><input type="radio" name="sex" id="userexinfo-form-gender-2" value="女"
                                         class="ui-radio" <c:if test="${member.sex=='女'}">checked</c:if>><label
                                    for="userexinfo-form-gender-2">女</label></span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>生活状态：</p>
                            <span><input type="radio" name="marry" id="userexinfo-form-merriage-1" value="单身"
                                         class="ui-radio radio-first"
                                         <c:if test="${member==null || member.marry=='单身'}">checked</c:if>><label
                                    for="userexinfo-form-merriage-1">单身</label></span>
                            <span><input type="radio" name="marry" id="userexinfo-form-merriage-2" value="热恋中"
                                         class="ui-radio" <c:if test="${member.marry=='热恋中'}">checked</c:if>><label
                                    for="userexinfo-form-merriage-2">热恋中</label></span>
                            <span><input type="radio" name="marry" id="userexinfo-form-merriage-3" value="已婚"
                                         class="ui-radio" <c:if test="${member.marry=='已婚'}">checked</c:if>><label
                                    for="userexinfo-form-merriage-3">已婚</label></span>
                            <span><input type="radio" name="marry" id="userexinfo-form-merriage-4" value="为人父母"
                                         class="ui-radio" <c:if test="${member.marry=='为人父母'}">checked</c:if>><label
                                    for="userexinfo-form-merriage-4">为人父母</label></span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>从事行业：</p>
                            <span><input type="text" name="major" id="major" class="ui-checkbox" placeholder="从事行业"
                                         value="${member.major}"></span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>兴趣爱好：</p>
                            <span><input type="text" name="hobbit" id="hobbit" class="ui-checkbox" placeholder="兴趣爱好"
                                         value="${member.hobbit}"></span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>个性签名：</p>
                            <span><input type="text" name="sign" id="sign" class="ui-checkbox" placeholder="个性签名"
                                         value="${member.sign}"></span>
                        </div>
                        <div class="userexinfo-bottom-section clearfix">
                            <input type="submit" class="form-save-btn" value="保存">
                            <!-- <span id="cancell-btn" class="cancel_alert hand">注销账号1</span> -->
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="bottom.jsp"/>

</body>
</html>
